<template>
  <div style="padding: 20px">
    <Alert message="间距示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
    </Alert>
    <div class="demoTittle">基础用法</div>
    <div>
      <a-slider v-model:value="size" :step="4" />
      <br />
      <br />
      <a-space :size="size">
        <a-button type="primary">Primary</a-button>
        <a-button>Default</a-button>
        <a-button type="dashed">Dashed</a-button>
        <a-button type="link">Link</a-button>
      </a-space>
    </div>
    <div class="demoTittle">分隔符</div>
    <div class="demoTittle2">- 相邻组件分隔符:16px</div>
    <a-space :size="16">
      <template #split>
        <a-divider type="vertical" />
      </template>
      <a-typography-link>分隔符</a-typography-link>
      <a-typography-link>分隔符</a-typography-link>
      <a-typography-link>分隔符</a-typography-link>
    </a-space>
    <div class="demoTittle">表单组件间距</div>
    <div class="demoTittle2">- 文本间距:8px；表单行间距:24px</div>
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="name" label="小标题" name="name">
        <a-input v-model:value="formState.name" :allow-clear="true" style="width: 180px" />
      </a-form-item>
      <a-form-item ref="name" label="小标题" name="name">
        <a-input v-model:value="formState.name" :allow-clear="true" style="width: 180px" />
      </a-form-item>
      <a-space :size="12">
        <a-button type="primary" @click="onSubmit">确定</a-button>
        <a-button @click="resetForm">取消</a-button>
      </a-space>
    </a-form>
  </div>
</template>
<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
  import { reactive, ref, toRaw } from 'vue';
  import type { Rule } from 'ant-design-vue/es/form';
  const formRef = ref();
  const labelCol = { style: 'width:66px' };
  const wrapperCol = { span: 6 };
  const size = ref(8);

  const formState = reactive({
    name: '',
  });

  const rules: Record<string, Rule[]> = {
    name: [{ required: true, message: '请输入', trigger: 'change' }],
  };

  const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        console.log('values', formState, toRaw(formState));
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
  const resetForm = () => {
    formRef.value.resetFields();
  };
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }

  .demoTittle2 {
    padding-bottom: 20px;
    font-size: 14px;
    color: #494a4a;
  }
  .ant-form-item {
    margin-bottom: 24px !important;
  }
</style>
